<template>


    <div class="mesEnDeatil" :class="[{ fullScreen: isFullscreen }]">
        <el-container class="mesDet"  v-loading="loading">
            <el-header class="mesHead">
                <div class="mesHLe">
                    <div class="mElog">
                        <img class="mElogM" src="@/assets/images/wireai_logo.png" alt="">
                    </div>
                    <div class="mEdes">
                        <div class="mEdesT" >
                            {{ detailInfo.title }}
                        </div>
                    </div>
                </div>
            </el-header>
            <div class="mesCZ">
                <div class="mesCZ_it" @click="changeFullscreen">
                    <el-icon size="16">
                        <FullScreen />
                    </el-icon>
                </div>
                <div class="mesCZ_it" @click="closeDetailModul">
                    <el-icon size="18">
                        <Close />
                    </el-icon>
                </div>
            </div>
            <el-container class="mesDc">
                <el-main class="mesMain" v-if="detailInfo">
                    <div class="mMt">
                        <div class="mMt_ar" :class="{ graytxt: isEiter || isShShow==3}"> {{ detailInfo.title }}</div>
                        <div class="mMt_ot">
                            <div class="mMtI">{{ timestampToDatetime(detailInfo.addtime).year }}</div>
                            <div class="mMtI">{{ timestampToDatetime(detailInfo.addtime).weekday }}</div>
                            <div class="mMtI">{{ timestampToDatetime(detailInfo.addtime).time }}</div>
                        </div>
                    </div>

                    <template v-if="isShShow==1">
                        <div class="czlan" v-if="detailInfo.status == 2">
                        <div class="czite shenhe" :class="{ disab: isEiter }">
                            报价单审核中
                        </div>
                    </div>
                    <div class="czlan" v-else-if="detailInfo.status == 3 || detailInfo.status == 5">
                        <div class="czite songda" :class="{ disab: isEiter }">
                            已送达报价单
                        </div>
                    </div>
                    <div v-else class="czlan">
                        <div class="czite fasong" :class="{ disab: isEiter }" @click="sendMessage(2)">
                            <svg-icon icon-class="d-send" /> 发送
                        </div>
                        <div class="czite other1" :class="{ disab: isEiter }" @click="sendMessage(1)">
                            <svg-icon icon-class="d-save" /> 保存
                        </div>
                        <el-upload :class="{ disab: isEiter }" :disabled="isEiter" ref="upload" class="upload-demo"
                            action="/api/Pdfapiindex/baojiaupload" :limit="1" name="file"
                            v-model:file-list="submitInfo.file" :show-file-list="false"
                            :headers="{ Token: useStore.token }" :auto-upload="true" :on-exceed="handleExceed"
                            :before-upload="checkFile" :on-success="fileSuccess"
                            :on-progress="imgProgress"
                            >
                            <div class="czite other1">
                                <svg-icon icon-class="d-annex" /> 添加报价单
                            </div>
                        </el-upload>
                    </div>

                    <div class="mMC">
                        <div class="mMCB">
                            <div class="mMCBL">
                                <div class="mUsername">
                                    {{ detailInfo.nickname }}
                                </div>
                                <div class="mUserBuy">
                                    <span class="maijia">
                                        询价人
                                    </span>
                                    <span class="company">
                                        {{ detailInfo.companyname }}
                                    </span>
                                </div>
                                <div class="menlist">
                                    <div class="menli">{{ detailInfo.classname }}</div>
                                </div>
                            </div>
                            <div class="telphone" v-if="detailInfo.phone">
                                <div class="telph">
                                    {{ detailInfo.phone }}
                                </div>
                            </div>
                        </div>
						<!-- 备注信息 -->
						<div class="beizhu" v-if="detailInfo.projectremark">
							{{detailInfo.projectremark}}
						</div>
                        <div class="mMCH">
                            <div class="mMCpdfs">
                                <div class="mMCpdf" :class="ispdfRE(detailInfo.filename)">
                                    {{ detailInfo.filename }}</div>
                                <!-- <div class="mMCpdflx">
                                    ( <span>5M</span> <span>25天后过期</span> )
                                </div> -->
                            </div>
                            <div class="mMCbts">
                                <div class="mMCdown" @click.stop="downloadfile()">
                                    下载询价单
                                </div>
                            </div>
                        </div>
                        <div class="mMDetai">
                            <div class="mMDetai_html">
                                <Editor
                                   
                                    id="editor-container"
                                    v-model="submitInfo.content"
                                    :default-config="editorConfig"
                                    mode="simple"
                                    @on-change="handleChange"
                                    @on-created="handleCreated" 
                                    />
                                    <!-- @on-change="handleChange"
                                    @on-created="handleCreated" -->
                                <!-- <editor :class="{ disab: isEiter }" v-model="submitInfo.content" /> -->
                            </div>
                        </div>

                        <!-- 附件 -->
                        
                        <div class="jiazai"  v-if="progressto.isload==1">
                            <el-progress 
                            :percentage="progressto.percent" 
                            :stroke-width="5"
                            :show-text="false"/>
                        </div>
                      
                        <div class="fujian" v-if="progressto.isload==2">
                            <div class="fujianName">
                                <div class="fujianNa" :class="ispdfRE(submitInfo.file[0].name)">
                                    {{ submitInfo.file[0].name }}
                                </div>
                            </div>
                            <div class="fjclose" v-if="!isEiter" @click="closeFujian"></div>
                        </div>
                    
                       
                    </div>
                    </template>

                    <div class="errmuch" v-else-if="isShShow==3">
                        <div class="errbox">
                            <div class="erri"></div>
                            <div class="errCont">
                                <div class="errTi">
                                    抱歉，您的报价单审核未通过！
                                </div>
                                <div class="errde">
                                    <div class="errdeW">未通过原因</div>
                                    <div class="errdeP">
                                       {{detailInfo.remark}}
                                    </div>
                                </div>
                            </div>
                            <div class="errCz">
                                <div class="errBtn" @click="isShShow= 1">修改报价单</div>
                            </div>
                        </div>
                    </div>
                    <div class="errmuch" v-else-if="isShShow==2">
                        <div class="errbox">
                            <div class="erri"> </div>
                            <div class="errCont">
                                <div class="errTi">
                                   您的报价单提交成功！
                                </div>
                                <div class="msti">
                                    <div class="mstis">
                                        WIRE AI小助手将在<span class="mstblu">0.5~3小时内</span>进行审核 <br>
                                         审核通过后发送询价人
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>







</template>

<script setup lang='ts'>
const imgurl = import.meta.env.VITE_APP_TITLE + '/assets/images/';
import { useUserStore } from "@/store/modules/user";
import { useSystemStore } from "@/store/modules/system";
import { useMessageListStore } from "@/store/modules/messagelist";
import { Close, FullScreen } from '@element-plus/icons-vue'
import pdfapi from "@/api/pdf.ts"
import { formatTimeDifference, timestampToDatetime, ispdfRE, maskPhoneNumber } from "@/utils/timeFun"
const api = inject('$base', null as any);
// import Editor from "@/components/WangEditorC/index.vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

const props = defineProps({
    param: {
        type: Object,
        require: true,
        default: {}
    },
});

const emit = defineEmits(["onCloseModule","onfunChange"]);


const baseurl = inject('$baseurl', null as any);
const useStore = useUserStore();
const base = useSystemStore();
const messageListStore = useMessageListStore();
const isFullscreen = ref(false);
const loading = ref<any>(false);

const isEiter = ref<any>(false);//是否可编辑
const isShShow =ref<any>(0) //当前的可变及状态 0 没有任何提示 1 提交成功 2 审核被拒绝

const detailInfo = ref<any>('');
const filterPop = reactive<any>({
    visible: false
})
const progressto =ref<any>({
    percent:0,
    isload:0
})


window.addEventListener('resize', function(){
	const width = window.innerWidth;
	if(width < 768){
		isFullscreen.value=true
	}else{
		
	}
});
const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
// 编辑器配置
const editorConfig = ref({
  placeholder: "请输入内容...",
  autoFocus:false,
  MENU_CONF: {
  
  },})

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  console.log('创建实例执行代码')
};

function handleChange(editor: any) {

}


const submitInfo = ref<any>({
    file: [],
    id: "",
    content: ""
})

/**
 * 全屏放大
 */
function changeFullscreen() {
    isFullscreen.value = !isFullscreen.value
}

const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    return 'status' + row.status
}

/**
 * 获取文章详情
 */
function enterprisemessageview() {
    loading.value = true;
    pdfapi.enterprisemessageview({ id: props.param.id }).then((res) => {
        console.log(res)
        loading.value = false;
        detailInfo.value = res.data;
        submitInfo.value.content = res.data.content || "";
        submitInfo.value.id = res.data.id;
        //存在附件
        submitInfo.value.file = res.data.baojiadanfile || [];
        progressto.value.isload =res.data.baojiafile ? 2:0

        if (res.data.status == 2 || res.data.status == 3 || res.data.status == 5) {
            isEiter.value = true;
            editorConfig.value.readOnly = true
        }
        else {
            isEiter.value = false;
        }
        if(res.data.status == 4)
        {
            isShShow.value = 3
        }
        else{
            isShShow.value = 1
        }

        //审核被拒
        initgetmembermessage();


    })
}

let extarr = ['docx','doc','pdf','xls','xlsx','ppt','pptx'];
// 选择文件上传
function checkFile(file) {
    var fileSize = file.size / 1024 / 1024 < 50;
    const index = file.name.lastIndexOf(".");
    const ext = file.name.substr(index + 1).toLowerCase();
    if (extarr.indexOf(ext) == -1) {
        ElMessage({
            message: '请上传正确的文件格式'+ extarr.join('、') +'。',
            type: 'error',
        })
        return false;
    }
    if (!fileSize) {
        ElMessage({
            message: '文件大小不能超过50MB',
            type: 'error',
        })
        return false;
    }
}

function imgProgress(evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles){
    console.log(evt,uploadFile,uploadFiles);
    // loading.value = true;
    progressto.value.isload = 1;
    progressto.value.percent= evt.percent;
}
//文件上传成功
function fileSuccess(response, file, filelist) {
    console.log(response, file, filelist);
    progressto.value.isload = 2;
    submitInfo.value.file = [
        {
            name: response.data.name,
            file: response.data.file
        }
    ]
}
//附件已存在
function handleExceed(files) {
    ElMessage({
        message: '附件已存在',
        type: 'warning',
    })
}

//发送信息 or 保存信息
function sendMessage(type: number) {
    if (detailInfo.value.status == 3 || detailInfo.value.status == 2) {
        console.log('不可编辑')
        return false;
    }
    if(progressto.value.isload == 1)
    {
        ElMessage({
            message: '附件正在上传中...',
            type: 'warning',
         })
         return false;
    }
    if(editorRef.value.getText().length <=0)
    {
        ElMessage({
            message: '报价内容不能为空',
            type: 'warning',
         })
         return false;
    }
    
    var data = {
        id: submitInfo.value.id,
        file: submitInfo.value.file.length > 0 ? submitInfo.value.file : [{ file: "", name: "" }],
        content: submitInfo.value.content,
        type: type
    }
    pdfapi.sendpricelist(data).then((res) => {
        console.log(res);
        ElMessage({
            message: res.msg,
            type: 'success',
        });
        if(type == 2)
        {
            isShShow.value = 2;
            emit('onfunChange')
        }
        else
        {
            closeDetailModul();
			emit('onfunChange')
        }
        //在这里更新vuex 可实现无感刷新;
    })
}


/**
 * 删除附件
 */
function closeFujian() {
    submitInfo.value.file = [];
    progressto.value.isload = 0;
    ElMessage({
        message: '附件已删除',
        type: 'success',
    });
}

function closeDetailModul() {
    emit('onCloseModule', false)
}

function initgetmembermessage() {
    pdfapi.getmembermessage({
        id: useStore.userIds
    }).then((res) => {
        messageListStore.merberInfoSt = res.data
        console.log(res)
    })
}

function downloadfile(){
    const a = document.createElement("a");
    a.href = baseurl + detailInfo.value.file;
    a.download = detailInfo.value.title.split('.')[0];
    document.body.appendChild(a);
    a.click(); // 点击下载
    document.body.removeChild(a); // 下载完成移除元素
}

onMounted(() => {
    enterprisemessageview();
	if(window.innerWidth < 768){
		isFullscreen.value=true
	}
})

</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
.messageEnter {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;

    .mECon {
        width: 100%;
        height: 100%;
        background: #ffffff;
        box-sizing: border-box;
        transition: 0.2s ease;
        flex-direction: column;
        display: flex;
        position: relative;

        .mesHead {
            display: flex;
            justify-content: space-between;
            align-items: center;
            align-content: center;
            border-bottom: 1px solid #dbe2ee;

            .mesHLe {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .mElog {
                    margin-right: 15px;

                    .mElogM {
                        height: 30px;
                        display: block;
                    }
                }

                .mEdes {
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    font-family: 'siyuanR';
                    position: relative;
                    padding-left: 15px;

                    &::after {
                        content: '';
                        width: 2px;
                        height: 16px;
                        background: #9094b0;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translate(0, -50%)
                    }

                    .mEdesT {
                        color: #9094b0;
                    }

                    .mEdesA {
                        color: #000;
                    }
                }
            }

            .mesCZ {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                align-content: center;

                .mesCZ_it {
                    width: 24px;
                    height: 24px;
                    margin-right: 16px;
                    margin-right: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    align-content: center;
                    cursor: pointer;

                    &:last-child {
                        margin-right: 0;
                    }

                    &:hover {
                        color: #2379f7;
                    }
                }
            }
        }

        .mEmain {
            background: #fcfcfd;
        }
    }
}

.entable {
    border: 1px solid #dbe2ee;
    box-sizing: border-box;
}

::v-deep .tabHead .el-table__cell {
    background: #f0f7fe;
    font-family: 'siyuanM';
    font-size: 16px;
    height: 50px;
    font-weight: normal;
    color: #485157;
    border-bottom: none !important;
}

::v-deep .entable .el-table__row {
    height: 56px
}


.ntext {
    // white-space: nowrap;
    // text-overflow: ellipsis;
    // overflow: hidden;
    font-family: 'siyuanR';
    font-weight: normal;
    font-size: 15px;

    &.title {
        font-family: 'siyuanM'
    }

}

.status0 .ntext {
    color: #010101
}

.status1 .ntext {
    color: #010101
}

.status2 .ntext {
    color: #999
}

.bjicons {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;

    .bjico {
        height: 24px;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        padding: 0 10px;
        border-radius: 14px;

        &.ydbj {
            background: #e8f1fe;
            color: #2379f7;
        }

        &.ybj {
            background: #e1fcfb;
            color: #0ac3b9;
        }

        &.wbj {
            background: #fee8ea;
            color: #fb7279;
        }

        &.dsh {
            background: #e8f7fe;
            color: #4ebbf5;
        }

        &.shbj {
            background: #feebe8;
            color: #f8674e;
        }
    }
}

.searchBox {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 14px;

    .filter {
        margin-right: 10px;

        .filterT {
            width: 70px;
            height: 32px;
            color: #2379f7;
            border-radius: 4px;
            background: #e8f1ff;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            cursor: pointer;
        }
    }

    .searInpu {}
}


::v-deep .searInpu .el-input-group__append {

    background: #6ca7fe;
    color: #ffffff;
    box-shadow: none;
    cursor: pointer;
}














.mesEnDeatil {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
	padding: 60px 0 60px;
	overflow: auto;
}

.mesDet {
    width: 90%;
    max-width: 1100px;
    min-height: 500px;
	height: 100%;
    background: #ffffff;
    display: flex;
    background: #ffffff;
    position: relative;
    border-radius: 10px;
    overflow: hidden;

    

    .mesHead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        border-bottom: 1px solid #dbe2ee;
        display: none;

        .mesHLe {
            display: flex;
            justify-content: flex-start;
            align-items: center;
width: 100%;
            .mElog {
                margin-right: 15px;

                .mElogM {
                    height: 30px;
                    display: block;
                }
            }

            .mEdes {
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                font-family: 'siyuanR';
                position: relative;
                padding-left: 15px;
				flex: 1;
				    width: 0;
				
                &::after {
                    content: '';
                    width: 2px;
                    height: 16px;
                    background: #9094b0;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translate(0, -50%)
                }

                .mEdesT {
                    color: #9094b0;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
                }

                .mEdesA {
                    color: #000;
                }
            }

        }




    }

    .mesCZ {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        position: absolute;
        top: 16px;
        right: 20px;
        z-index: 40;

        .mesCZ_it {
            width: 24px;
            height: 24px;
            margin-right: 16px;
            margin-right: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            cursor: pointer;

            &:last-child {
                margin-right: 0;
            }

            &:hover {
                color: #2379f7;
            }
        }
    }

    .mesDc {
        height: 100%;
    }

    .mesMain {
        padding: 40px 40px 40px;
        display: flex;
        flex-direction: column;
        height: 100%;

        .mMt {
            padding-bottom: 14px;

            .mMt_ar {
                font-size: 18px;
                color: #2379f7;
                font-family: 'siyuanM';
                line-height: 30px;
            }

            .mMt_ot {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                height: 26px;

                .mMtI {
                    font-size: 12px;
                    color: #9094b0;
                    font-family: 'siyuanM';
                    margin-right: 10px;
                    margin-top: 6px;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }

        }

        .mMC {
            width: 100%;
            border: 1px solid #dbe2ee;
            background: #ffffff;
            padding: 30px 30px 10px;
            border-radius: 6px;
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 0;
            position: relative;

            .mMCB {
                display: flex;
                align-items: baseline;
                align-content: center;
                margin-bottom: 10px;
                width: 100%;
                justify-content: space-between;

                .mMCBL {
                    display: flex;
                    width: 100%;
                    align-items: baseline;
                    align-content: center;
					flex-wrap: wrap;
                }

                .telphone {

                    .telph {
                        font-size: 14px;
                        color: #000000;
                        background: url('../../assets/miscel/tel.png') no-repeat left center;
                        background-size: 15px 15px;
                        padding-left: 20px;
                    }
                }



                .mUsername {
                    font-size: 16px;
                    font-family: "siyuanR";
                    color: #000000;
                    margin-right: 6px;
                }

                .mUserBuy {
					 margin-right: 10px;
                    .maijia {
                        font-size: 12px;
                        color: #9094b0;
                        margin-right: 4px;
                    }

                    .company {
                        font-size: 12px;
                        color: #9094b0;
                    }
                }

                .menlist {
                   

                    .menli {
                        border: 1px solid #2379f7;
                        line-height: 24px;
                        padding: 0 10px;
                        border: 1px solid #2379f7;
                        border-radius: 6px;
                        color: #2379f7
                    }
                }

            }






            .mMCH {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                border-bottom: 1px solid #dbe2ee;

                .mMCpdfs {
                    background: #f0f7fe;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding: 0 8px;
                    line-height: 30px;
                    box-sizing: border-box;
                    margin-right: 40px;
                    margin-bottom: 15px;
                    flex-wrap: wrap;
                    border-radius: 4px;

                    .mMCpdf {
                        font-size: 12px;
                        color: #333333;
                        white-space: nowrap;
                    }

                    .mMCpdflx {
                        margin-left: 10px;
                        font-size: 13px;
                        color: #9094b0;
                        margin-right: 20px;

                        span {
                            margin-right: 6px
                        }
                    }
                }

                .mMCbts {
                    display: flex;
                    justify-content: flex-start;
                    margin-bottom: 15px;

                    .mMCdown {
                        padding: 0 20px;
                        height: 30px;
                        text-align: center;
                        line-height: 30px;
                        background: #2379f7;
                        color: #ffffff;
                        border-radius: 6px;
                        cursor: pointer;
                        white-space: nowrap;

                        &:active {
                            opacity: 0.7
                        }
                    }

                    .mMCyx {

                        padding: 0 20px;
                        height: 30px;
                        text-align: center;
                        line-height: 30px;
                        background: #e8f1ff;
                        color: #2379f7;
                        border-radius: 6px;
                        cursor: pointer;

                        &:active {
                            opacity: 0.7
                        }
                    }
                }
            }

            .mMDetai {
                padding: 15px 0;
                box-sizing: border-box;
                width: 100%;
                // min-height: 200px;
                // height: 100%;
				// height: 300px;
				flex:1;
				height: 0;
				

                .mMDetai_html {
                    width: 100%;
                    height: 100%;
                    overflow: auto;
                }

            }
        }
    }


}

.rowitem {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.isOkSub {
    width: 100px;
    height: 32px;
    background: #2379f7;
    color: #fff;
    line-height: 32px;
    text-align: center;
    border-radius: 6px;

}


.czlan {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    margin-bottom: 6px;
}

.czite {
    height: 30px;
    padding: 0 20px;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    margin-right: 10px;
    border-radius: 6px;
    color: #333333;
    transition: 0.2s linear;
    cursor: pointer;

    &.fasong {
        background: #2379f7;
        color: #ffffff;
    }

    &.shenhe {
        font-size: 18px;
        color: #2379f7;
        margin-left: 0;
        background: url('../../assets/miscel/sh.png') no-repeat center left;
        background-size: 20px 20px;
        padding-left: 24px;
        font-family: 'siyuanM';
    }

    &.songda {
        font-size: 18px;
        color: #2379f7;
        margin-left: 0;
        background: url('../../assets/miscel/sh1.png') no-repeat center left;
        background-size: 20px 20px;
        padding-left: 24px;
        font-family: 'siyuanM';
    }


    &.other1:hover {
        background: #2379f7;
        color: #ffffff;
    }
}





.pdf {
    background: url('../../assets/images/icon2.png') no-repeat left center;
    background-size: 16px auto;
    padding-left: 20px;
}

.doc {
    background: url('../../assets/images/icon1.png') no-repeat left center;
    background-size: 16px auto;
    padding-left: 20px;
}
.xls {
    background: url('../../assets/images/icon99.png?v=100') no-repeat left center;
    background-size: 16px auto;
    padding-left: 20px;
}
.ppt {
    background: url('../../assets/images/icon98.png?v=100') no-repeat left center;
    background-size: 16px auto;
    padding-left: 20px;
}
.other {
    background: url('../../assets/images/link.png') no-repeat left center;
    background-size: 16px auto;
    padding-left: 20px;
}

.jiazai{
    width: calc(100% - 60px);
    position: absolute;
    bottom: 0;
    left: 30px;

}
.fujian {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    position: absolute;
    left: 30px;
    bottom: 20px;

    .fujianName {
        border: 1px solid #dbe2ee;
        padding: 0 10px;
        border-radius: 4px;
        background: #ffffff;

        .fujianNa {
          
            color: #000;
            line-height: 26px;
              font-size: 12px;
            position: relative;
        }

        margin-right: 6px;
    }

    .fjclose {
        width: 30px;
        height: 30px;
        background: #fff url('../../assets/miscel/close.png') no-repeat center center;
        background-size: 18px 18px;
        cursor: pointer;

        &:hover {
            opacity: 0.9;
        }
    }
}

::v-deep .el-table tr:hover td {
    background: green !important;
    color: #ffffff !important;

    .ntext {
        color: #ffffff !important;
    }
}

::v-deep .el-table tr:hover td:nth-child(1) {
    border: 2px solid #2379f7;
    box-sizing: border-box;
}

.disab {

    pointer-events: none;
    cursor: no-drop;
}


.shbj {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 33;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;

    .bhyy {}

    .bhbtn {
        width: 100%;

        .cxbj {
            margin: 0 auto;
            width: 180px;
            height: 40px;
            background: #2379f7;
            color: #fff;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            border-radius: 6px;
            cursor: pointer;
        }
    }
}


.errmuch {
    width: 100%;
    flex: 1;
    height: 0;

    
    .errbox {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        padding-bottom: 30px;
        box-sizing: border-box;
        .erri {
            width: 100%;
            background: url('../../assets/miscel/erro.png') no-repeat center center;
            background-size: 125px 125px;
            height: 125px;
            margin-bottom: 4px;
        }

        .errCont {
            width: 100%;
            text-align: center;
            .errTi {
                font-size: 20px;
                font-family: 'siyuanM';
                color: #2379f7;
                margin-bottom: 6px;
            }

            .errde {
                .errdeW {
                    font-size: 14px;
                    color: #333333;
                    margin-bottom: 6px;
                }

                .errdeP {
                    font-size: 15px;
                    color: #333333;
                }
            }
            .msti{
                .mstis{
                    font-size: 14px;
                    color: #333333;
                    font-family: 'siyuanR';
                    line-height: 24px;
                    .mstblu{
                        color: #2379f7;
                    }
                }
            }
        }

        .errCz {
            width: 100%;
            margin-top: 20px;
            .errBtn {
                width: 110px;
                height: 30px;
                background: #2379f7;
                color: #ffffff;
                text-align: center;
                line-height: 30px;
                font-size: 14px;
                border-radius: 4px;
                margin: 0 auto;
                cursor: pointer;
                &:hover{
                    opacity: 0.8;
                }
            }
        }

    }


}
.graytxt{
	color: #000000!important;
}



.fullScreen {
    padding: 0 0;
	.mesDet{
		width: 100%;
		min-height: calc(100% - 60px);
		max-width: 100%;
		border-radius: 0;
		overflow: hidden;
		.mesMain{
			height: calc(100% - 60px);
		}
	}
		

	.mesHead {
		display: flex;
	}
}


@media screen and (max-width: 768px){
	
	.mesCZ_it:nth-child(1){
		display: none!important;
	}
	.mElogM{
		height: 24px!important;
	}
	.mEdesT{
	
	}
	.mesDet .mesMain{
		padding: 20px 10px;
	}
	.mesDet .mesMain .mMt .mMt_ar{
		font-size: 16px;
	}
	.mesDet .mesMain .mMt .mMt_ot{
		
	}
	.mesDet .mesMain .mMC{
		padding: 20px 10px;
	}
	.mesDet .mesMain .mMC .mMCB .menlist .menli{
		margin-top: 6px;
	}
	
	.mesDet .mesMain .mMC{
		height: auto;
	}
	.mesDet .mesMain .mMC .mMDetai{
		height: 50vh;
	}
	.mesDet .mesMain .mMC{
		height: auto;
	}
	.mMDetai_html{
		min-height: 100%;
	}
	.mesDet .mesDc{
		height: calc(100% - 60px);
	}
	.fujian{
		position: fixed;
		left: 30px;
		bottom:30px;
		max-width: calc(100% - 60px);
	}
	.jiazai{
		position: fixed;
	}
}

.beizhu{
	font-size: 12px;
	line-height: 24px;
	background: #f4f4f4;
	color: #666;
	padding: 10px 15px;
	border-radius: 6px;
	margin-bottom: 10px;
}

::v-deep .mMDetai_html .w-e-text-container p {
	margin: 5px 0;
}
::v-deep .mMDetai_html .w-e-text-placeholder{
	top:6px
}
</style>